<template>
  <v-chart
    :theme="theme"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :initOptions="initOptions"
    :options="config"
    v-on="$listeners"
    ref="cloud"
  />
</template>
<script>
import VChart from '../../Core'

export default {
  name: 'GaugeChart',
  components: {
    VChart,
  },
  props: {
    setColor: Function,
    showTitle: {
      type: Boolean,
      default: false,
    },
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    initOptions: Object,
    options: {
      type: Object,
      default: function() {
        return {}
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  computed: {
    config() {
      const { title, legend, tooltip, series, ...otherConfig } = this.options

      const option = {
        title,
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
          ...tooltip,
        },
        legend: {
          ...legend,
        },

        series: (series || []).map(item => ({
          type: 'gauge',
          title: { show: false },
          itemStyle: {
            color: '#ddd',
          },
          axisLabel: {
            show: true,
            color: '#262a30',
          }, //刻度标签。
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0.7, '#13E267'],
                [1, '#e9ecf0'],
              ],
            },
          },
          splitLine: {
            show: false,
            length: 30,
            lineStyle: {
              color: '#fff',
            },
          }, //分隔
          splitNumber: 4,
          detail: { formatter: '{value}%', offsetCenter: [0, '80%'], color: '#262a30' },
          ...item,
        })),
        ...otherConfig,
      }

      return option
    },
  },

  methods: {
    getEchartsInstance() {
      return this.$refs.cloud.chart
    },
  },
}
</script>
